<@main.page title="用户列表">

<style>
    .typeahead {

        width: 380px;
        height: 100px;
        overflow: auto;
    }
</style>


<div class="row" style="margin-top:20px;">

    <div class="col-md-12">
        <div class="clearfix pull-right" style="margin-top: 3px; margin-left: 10px">
            <a data-toggle="modal" data-target="#myModal" class="btn  yellow"><i
                    class="glyphicon glyphicon-folder-close"></i> 新建 </a>


        </div>
        <table class="table table-striped table-bordered table-hover table-lb" id="sample_yhlb">
            <thead>
            <tr>
                <!--<th class="table-checkbox" style="width: 30px">-->
                <!--<input type="checkbox" class="group-checkable"-->
                <!--data-set="#sample_yhlb .checkboxes"/></th>-->
                <th>用户登录标识</th>
                <th>启用</th>
                <th style="width: 30px;">已退出</th>
                <th style="width: 100px;">禁用时间</th>
                <th style="width: 30px;">操作</th>

            </tr>
            </thead>
            <tbody>
            <tr class="odd gradeX info" id="tr_1">
                <!--<td style="width: 30px"><input type="checkbox" class="checkboxes" value="1" /></td>-->
                <td>用户登录标识1</td>

                <td>启用</td>
                <td style="width: 30px;">退出</td>
                <td style="width: 100px;">2015-09-28</td>
                <td style="width: 30px;">
                    <button class="btn btn-sm  red"><span class="glyphicon glyphicon-trash"></span> 删除</button>
                    <a class="btn btn-sm green bianji-btn"><i class="fa fa-edit"></i> 编辑</a>
                </td>

            </tr>
            <tr class="odd gradeX info" id="tr_1">
                <!--<td style="width: 30px"><input type="checkbox" class="checkboxes" value="1" /></td>-->
                <td>用户登录标识1</td>

                <td>启用</td>
                <td style="width: 30px;">退出</td>
                <td style="width: 100px;">2015-09-28</td>
                <td style="width: 30px;">
                    <button class="btn btn-sm  red"><span class="glyphicon glyphicon-trash"></span> 删除</button>
                    <a class="btn btn-sm green bianji-btn"><i class="fa fa-edit"></i> 编辑</a>
                </td>

            </tr>

            <tr class="odd gradeX info" id="tr_1">
                <!--<td style="width: 30px"><input type="checkbox" class="checkboxes" value="1" /></td>-->
                <td>用户登录标识1</td>

                <td>启用</td>
                <td style="width: 30px;">退出</td>
                <td style="width: 100px;">2015-09-28</td>
                <td style="width: 30px;">
                    <button class="btn btn-sm  red"><span class="glyphicon glyphicon-trash"></span> 删除</button>
                    <a class="btn btn-sm green bianji-btn"><i class="fa fa-edit"></i> 编辑</a>
                </td>

            </tr>

            <tr class="odd gradeX info" id="tr_1">
                <!--<td style="width: 30px"><input type="checkbox" class="checkboxes" value="1" /></td>-->
                <td>用户登录标识1</td>

                <td>启用</td>
                <td style="width: 30px;">退出</td>
                <td style="width: 100px;">2015-09-28</td>
                <td style="width: 30px;">
                    <button class="btn btn-sm  red"><span class="glyphicon glyphicon-trash"></span> 删除</button>
                    <a class="btn btn-sm green bianji-btn"><i class="fa fa-edit"></i> 编辑</a>
                </td>

            </tr>

            <tr class="odd gradeX info" id="tr_1">
                <!--<td style="width: 30px"><input type="checkbox" class="checkboxes" value="1" /></td>-->
                <td>用户登录标识1</td>

                <td>启用</td>
                <td style="width: 30px;">退出</td>
                <td style="width: 100px;">2015-09-28</td>
                <td style="width: 30px;">
                    <button class="btn btn-sm  red"><span class="glyphicon glyphicon-trash"></span> 删除</button>
                    <a class="btn btn-sm green bianji-btn"><i class="fa fa-edit"></i> 编辑</a>
                </td>

            </tr>

            <tr class="odd gradeX info" id="tr_1">
                <!--<td style="width: 30px"><input type="checkbox" class="checkboxes" value="1" /></td>-->
                <td>用户登录标识1</td>

                <td>启用</td>
                <td style="width: 30px;">退出</td>
                <td style="width: 100px;">2015-09-28</td>
                <td style="width: 30px;">
                    <button class="btn btn-sm  red"><span class="glyphicon glyphicon-trash"></span> 删除</button>
                    <a class="btn btn-sm green bianji-btn"><i class="fa fa-edit"></i> 编辑</a>
                </td>

            </tr>

            </tbody>
        </table>
    </div>
</div>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- dialog body -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="myModalLabel">新建</h4>
            </div>
            <div class="modal-body">
                <div class="row" style="padding: 10px">
                    <div class="col-sm-12">

                        <form class="form-horizontal ">

                            <div class="form-group has-feedback">
                                <label for="inputEmail3" class="col-sm-3 text-muted control-label lh-form-group-label">用户登录标识</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" placeholder="标识">

                                </div>
                            </div>
                            <div class="form-group has-feedback">
                                <label for="inputPassword3"
                                       class="col-sm-3 text-muted control-label lh-form-group-label">当前密码</label>
                                <div class="col-sm-9">
                                    <input type="password" class="form-control" id="inputPassword3" placeholder="密码">

                                </div>
                            </div>
                            <div class="form-group has-feedback">
                                <label for="inputPassword3"
                                       class="col-sm-3 text-muted control-label lh-form-group-label">当前密码验证</label>
                                <div class="col-sm-9">
                                    <input type="password" class="form-control" id="inputPassword3" placeholder="密码验证">

                                </div>

                            </div>

                            <div class="form-group">
                                <label for="inputPassword3"
                                       class="col-sm-3 text-muted control-label lh-form-group-label">密码提示</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="inputPassword3" placeholder="提示">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="inputPassword3"
                                       class="col-sm-3 text-muted control-label lh-form-group-label">必须修改密码</label>
                                <div class="col-sm-9">
                                    <select class="form-control">
                                        <option>N</option>
                                        <option>Y</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group qiye-sousuo  ">
                                <label for="" class="col-sm-3 text-muted control-label lh-form-group-label">所属企业</label>
                                <div class="col-sm-9">

                                    <div class="input-group ">
                                        <input type="text" class="form-control sousuo-input" name="">
                                        <!--<input type="text" class="form-control" aria-label="..." id="tags">-->
                                        <div class="input-group-btn ">
                                            <a class="btn btn-default dropdown-toggle sousuo-btn"
                                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                                                <span class="glyphicon glyphicon-search"></span>&nbsp;</a>
                                            <ul class="dropdown-menu  pull-right "
                                                style="width: 380px; max-height: 200px; overflow: auto">

                                                <li><a href="#" class="sousuo-list" name="id1">撒的发生打发1</a></li>
                                                <li><a href="#" class="sousuo-list" name="id2">撒的发生打发2</a></li>
                                                <li><a href="#" class="sousuo-list" name="id3">撒的发生打发3</a></li>
                                                <li><a href="#" class="sousuo-list" name="id4">撒的发生打发4</a></li>
                                                <li><a href="#" class="sousuo-list" name="id5">撒的发生打发5</a></li>

                                            </ul>
                                        </div><!-- /btn-group -->
                                    </div><!-- /input-group -->
                                </div>


                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- dialog buttons -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存完成</button>
            </div>
        </div>
    </div>
</div>


<div id="bianji" class="modal fade ">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- dialog body -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="">编辑</h4>
            </div>
            <!-- dialog body -->
            <div class="modal-body">
                <div class="row" style="padding: 10px">
                    <div class="col-sm-12">

                        <form class="form-horizontal ">

                            <div class="form-group has-feedback">
                                <label for="inputEmail3" class="col-sm-3 text-muted control-label lh-form-group-label">用户登录标识</label>

                                <label class="col-sm-9 control-label" style=" text-align: left">用户登录标识</label>


                            </div>


                            <div class="form-group qiye-sousuo-bianji  ">
                                <label for="" class="col-sm-3 text-muted control-label lh-form-group-label">所属企业</label>
                                <div class="col-sm-9">

                                    <div class="input-group ">
                                        <input type="text" class="form-control sousuo-input" name="">
                                        <!--<input type="text" class="form-control" aria-label="..." id="tags">-->
                                        <div class="input-group-btn ">
                                            <a class="btn btn-default dropdown-toggle sousuo-btn"
                                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                                                <span class="glyphicon glyphicon-search"></span>&nbsp;</a>
                                            <ul class="dropdown-menu  pull-right "
                                                style="width: 380px; max-height: 200px; overflow: auto">

                                                <li><a href="#" class="sousuo-list" name="id1">撒的发生打发1</a></li>
                                                <li><a href="#" class="sousuo-list" name="id2">撒的发生打发2</a></li>
                                                <li><a href="#" class="sousuo-list" name="id3">撒的发生打发3</a></li>
                                                <li><a href="#" class="sousuo-list" name="id4">撒的发生打发4</a></li>
                                                <li><a href="#" class="sousuo-list" name="id5">撒的发生打发5</a></li>

                                            </ul>
                                        </div><!-- /btn-group -->
                                    </div><!-- /input-group -->
                                </div>


                            </div>

                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 text-muted control-label lh-form-group-label">
                                    操作
                                </label>
                                <div class="col-sm-9 " style=" text-align: left">
                                    <button type="button" class="btn btn-sm btn-warning" data-toggle="button"
                                            aria-pressed="false" autocomplete="off">禁用
                                    </button>
                                    <!--<button type="button" class="btn btn-sm btn-success">启用</button>-->


                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- dialog buttons -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存完成</button>
            </div>
        </div>
    </div>
</div>


<script>
    jQuery(document).ready(function () {
        // initiate layout and plugins

//

        // 廖辉为用户列表页面table增加的css time 2016/2/19
        $('#sample_yhlb').dataTable({
            "aoColumns": [
//                {"bSortable": false},
                {"bSortable": false},
                {"bSortable": false},
                {"bSortable": false},
                {"bSortable": false},
                {"bSortable": false}

            ],
            "aLengthMenu": [
                [5, 15, 20, -1],
                [5, 15, 20, "全部"] // change per page values here
            ],
            "bFilter": true, //搜索栏
            "iDisplayLength": 10,
            "sPaginationType": "bootstrap",
            "autoWidth": true, //控制Datatables是否自适应宽度

            "oLanguage": {

                "sLengthMenu": "_MENU_  条",
                "oPaginate": {
                    "sPrevious": "Prev",
                    "sNext": "Next"
                }
            },

        });


        jQuery('#sample_yhlb_wrapper .dataTables_filter input').addClass("form-control input-medium").attr({"placeholder": "搜索内容"}); // modify table search input
        jQuery('#sample_yhlb_wrapper .dataTables_filter .input-medium').css("width", "300px !important"); // modify table search input
        jQuery('#sample_yhlb_wrapper .dataTables_length select').addClass("form-control input-xsmall"); // modify table per page dropdown
        jQuery('#sample_yhlb_wrapper .dataTables_length select').select2(); // initialize select2 dropdown


        /*  新建 所属企业 搜索框代码  */
        $(".qiye-sousuo").on("click", ".sousuo-btn", function () {


                    var souVal = $(".qiye-sousuo .sousuo-input").val();

                    if (souVal == "" || !souVal) {
                        $(".qiye-sousuo").addClass("has-error");
                        $('.qiye-sousuo .dropdown-menu').hide();
                    } else {

                        $('.qiye-sousuo .dropdown-menu').show();
                        $(".qiye-sousuo").removeClass("has-error");

                    }

                })
                .on("click", ".sousuo-list", function () {
                    $(".qiye-sousuo .sousuo-input").val($(this).text()).attr({"name": $(this).attr("name")});
                    $('.qiye-sousuo .dropdown-menu').hide();
                });


        /*  end 新建 所属企业 搜索框代码  */


        /*  编辑 所属企业 搜索框代码  */
        $(".qiye-sousuo-bianji").on("click", ".sousuo-btn", function () {


                    var souVal = $(".qiye-sousuo-bianji .sousuo-input").val();

                    if (souVal == "" || !souVal) {
                        $(".qiye-sousuo-bianji").addClass("has-error");
                        $('.qiye-sousuo-bianji .dropdown-menu').hide();
                    } else {

                        $('.qiye-sousuo-bianji .dropdown-menu').show();
                        $(".qiye-sousuo-bianji").removeClass("has-error");

                    }

                })
                .on("click", ".sousuo-list", function () {
                    $(".qiye-sousuo-bianji .sousuo-input").val($(this).text()).attr({"name": $(this).attr("name")});
                    $('.qiye-sousuo-bianji .dropdown-menu').hide();
                });

        /*  end 编辑 所属企业 搜索框代码  */


        //编辑按钮弹出层
        $(".bianji-btn").click(function () {
            $('#bianji').modal("show");
        });

    });


</script>


</@main.page>

